<template>
  <div>
    <van-row
      style="height: 350px; line-height: 350px; color: aqua; font-size: 30px">
      <van-col span="24">  TT24H自助洗车 </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <van-cell-group>
          <van-field
            v-model="smallname"
            label="用户名"
            placeholder="请输入2-6位的用户名" 
            />
          <van-field
            v-model="password1"
            label="密码"
            placeholder="请输入密码" />
          <van-field
            v-model="password2"
            label="确认密码"
            placeholder="请再次输入密码" />
          <span style="margin-left: -93px">请选择密码：</span>
          <el-radio-group v-model="sex">
            <el-radio :label="1" border>男</el-radio>
            <el-radio :label="2" border>女</el-radio>
          </el-radio-group>
          <van-field
            v-model="mobile"
            label="手机号"
            placeholder="请输入手机号" 
            @blur="checkNum()"
            />
          <van-field
            v-model="number"
            center
            clearable
            label="获取验证码"
            placeholder="请输入短信验证码">
            <template #button>
              <van-button v-if="codeShow" round  @click="getPhoneCode()"
                >获取验证码</van-button
              >
              <van-button v-if="!codeShow"  round
                >{{ count }}秒后重试</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
      </van-col>
    </van-row>

    <van-row style="margin-top: 15px; font-size: 13px">
      <van-col span="8" style="text-align: left; margin-left: 15px">
        <a @click="jump('login')">登录 </a>
      </van-col>
      <van-col span="6"></van-col>
      <van-col span="8" style="text-align: right">
        <a @click="jump('pass')">忘记密码 </a>
      </van-col>
    </van-row>

    <van-button
      round
      type="info"
      style="margin-top: 10px; width: 80%"
      @click="login"
      >注册</van-button
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "", //登陆账号
      passWord: "", //登录密码
      //181-360 注册
      mobile: "", //手机号
      password1: "", //密码
      password2: "", //确认密码
      smallname: "", //用户名
      sex: "", //性别
      number: "", //验证码
      count: "", //计时器
      codeShow: true, //验证码判
      timer: null, //计时器
    };
  },
  methods: {
    jump(uri) {
      this.$router.push(uri);
    },
    checkNum(){
                let _this=this;
                //失去焦点判断手机号是否存在
                if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.mobile)) {
                    _this.open3();
                }else {
                  _this.$http
          .get('/tuser/queryByMobile?mobile=' + this.mobile)
                        .then(function (response) {
                          //alert(JSON.stringify(response.data))
                            if (response.data.data == 200) {
                                _this.open2()
                            } else {
                                _this.open1()
                            }
                        })
                        .catch(function (error) {

                        });
                }
            },
            open1() {
                this.$message({
                    message: '恭喜你，这是该手机号可以使用请获取验证码',
                    type: 'success'
                });
            },
            open2() {
                this.$message.error('手机号已存在');
            },
            open3() {
                this.$message.error('请填写正确手机号');
            },
    // 验证码发送
    getPhoneCode() {
      var _this = this;
      if (
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          this.mobile
        )
      ) {
        this.$http
          .post("/tuser/createCode?mobile=" + this.mobile)
          .then(function (response) {
            if (response.data.code == 200) {
              //计时
              const TIME_COUNT = 60;
              _this.$message({
                type: "success",
                message: "验证码已发送!",
              });
              if (!_this.timer) {
                _this.count = TIME_COUNT;
                _this.codeShow = false;
                _this.timer = setInterval(() => {
                  if (_this.count > 0 && _this.count <= TIME_COUNT) {
                    _this.count--;
                  } else {
                    _this.codeShow = true;
                    clearInterval(_this.timer);
                    _this.timer = null;
                  }
                }, 1000);
              }
            } else {
              _this.$message.error("未生成");
            }
          });
      } else {
        this.$message.error("手机号错误,验证码无法生成");
      }
    },
    // 注册
    login() {
      var _this = this;
      console.log("注册。。。。。。。。。。。。");
      if (this.smallname == "") {
        _this.$message.error("用户名不可以为空");
        return;
      } else if (this.smallname.length > 12 || this.smallname.length < 2) {
        _this.$message.error("请输入2-12位的用户名");
        return;
      } else if (this.password1 == "") {
        _this.$message.error("密码不可以为空");
        return;
      } else if (this.password2 == "") {
        _this.$message.error("请再次输入密码");
        return;
      } else if (this.password1 != this.password2) {
        _this.$message.error("两次密码需保持一致！");
        return;
      } else if (this.sex == "") {
        _this.$message.error("性别不可以为空");
        return;
      } else if (this.mobile == "") {
        _this.$message.error("手机号不能为空");
        return;
      } else if (this.number == "") {
        _this.$message.error("验证码不能为空");
        return;
      }
      //用户注册
      this.$http
        .post("/tuser/yanzhen?number=" + this.number)
        .then(function (response) {
          if (response.data.code == 200 && response.data.data == 200) {
            console.log(response);
            _this.addAAA();
          } else {
            _this.$message.error("验证码错误");
          }
        })
        .catch(function (error) {
          console.log(error);
          _this.$message.error("验证码错误。。。");
        });
    },
     // 将注册信息存入数据库
    addAAA() {
      var _this = this;
      this.$http
        .post("/tuser/add", {
          mobile: this.mobile,
          password: this.password2,
          sex: this.sex,
          smallname: this.smallname,
        })
        .then(function (response) {
          if (response.data.code == 200) {
            _this.jump("login");
          } else {
            _this.$message.error("用户名或者密码错误");
          }
        })
        .catch(function (error) {
          console.log(error);
          _this.$message.error("你错了。。。");
        });
    },
  },
};
</script>

<style>
.nav_spj {
  height: 350px;
  background-color: aqua;
}
</style>
